<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			body {
				background: #F1F1F1;
			}
			
			/*导航栏*/
			nav {
				height: 64px;
				color: white;
				background: red;
				text-align: center;
			}
			
			nav span {
				position: relative;
				margin: 0 auto;
				display: inline-block;
				bottom: -34px;
			}
			
			/*广告位*/
			#banner-box {
				width: 100%;
				height: 10em;
				background: orange;
			}
			
			/*中间部分*/
			#items {
				display: flex;
				display: -webkit-flex;
				flex-direction: row;
				flex-wrap:wrap;
				
			}
			
			#items .item {
				background: #f1f1f1;
				width: 33.33%;
				height: 110px;
				display: flex;
				align-items: center;
				flex-direction: column;
				
			}
			
			#items .item img {
				width: 55px;
				height: 55px;
				background: red;
				margin-top: 15px;
			}
			
			#items .item p {
				margin-left: 5px;
				margin-right: 5px;
			}
			
			/*公告*/
			#announcement {
				height: 50px;
				width: 100%;
				background: red;
			}
			
			/*广告区域*/
			#advertising-area {
				width: 100%;
				display: flex;
				flex-direction: row;
				/*为了设置间隔*/
				margin-right: -10px;
				margin-top: 10px;
			}
			
			#advertising-area .left {
				height: 180px;
				width: 50%;
				background: wheat;
				/*为了设置间隔*/
				margin-right: 10px;
			}
			
			
			#advertising-area .right {
				display: flex;
				width: 50%;
				flex-direction: column;
				height: 180px;
				/*为了设置间隔*/
				margin-bottom: -10px;
			}
			
			#advertising-area .right .top {
				flex: 1;
				background: orange;
				/*为了设置间隔*/
				margin-bottom: 10px;
			}
			
			#advertising-area .right .down {
				flex: 1;
				background: orange;
			}
			
			/*中间的底部广告*/
			#advertising-area-bottom {
				height: 120px;
				background: red;
				margin-top: 10px;
			}
			
			/*底部商品*/
			#products  {
				display: flex;
				flex-direction: row;
				flex-wrap:wrap;	
				/*justify-content:center;	*/		
			}
			
			/*#products  .item {
				height: 200px;
				width: 47.75%;
				background: wheat;
				margin-top: 10px;
				margin-left: 1.5%;	
			}*/
			
			/*item 为1 3 5 7 2n或者2n+1*/
			#products .item:nth-child(2n+1) {
				width: 50%;
				height: 200px;
				margin-top: 10px;
			}
			/*左边*/
			#products .item:nth-child(2n+1) .content {
				background: wheat;
				height: 100%;
				margin-left: 10px;
				margin-right: 5px;
			}
			
			#products .item:nth-child(2n) {
				width: 50%;
				height: 200px;
				margin-top: 10px;
			}
			
			/*右边*/
			#products .item:nth-child(2n) .content {
				background: red;
				height: 100%;
				margin-left: 5px;
				margin-right: 10px;
			}
			
		</style>
	</head>
	<body>
		
		<nav>
			<span>赶街</span>
		</nav>
		
		<div id="banner-box">
			
		</div>
		
		<div id="items">
			<a class="item">
				<img src=""/>
				<p>测试</p>
			</a>
			<a class="item">
				<img src=""/>
				<p>测试</p>
			</a>
			<a class="item">
				<img src=""/>
				<p>测试</p>
			</a>
			<a class="item">
				<img src=""/>
				<p>测试</p>
			</a>
			<a class="item">
				<img src=""/>
				<p>测试</p>
			</a>
			<a class="item">
				<img src=""/>
				<p>测试</p>
			</a>
		</div>
		
		<div id="announcement">
			
		</div>
		
		<div id="advertising-area">
			<div class="left">
				
			</div>
			<div class="right">
				<div class="top">
					
				</div>
				<div class="down">
					
				</div>
			</div>
		</div>
		
		<div id="advertising-area-bottom">
			
		</div>
		
		<div id="products">
			<div class="item">
				<div class="content"></div>
			</div>
			<div class="item"><div class="content"></div></div>
			<div class="item"><div class="content"></div></div>
			<div class="item"><div class="content"></div></div>
			<div class="item"><div class="content"></div></div>
			<div class="item"><div class="content"></div></div>
		</div>
		
	</body>
</html>
